<template>
	<!-- 推广收益 -->
	<view class="">
		<view class="c_presentab">
			<view class="c_presentabitem" @tap="tab('')">
				<view class="c_i" :class="{c_iactive:active===''}">
					全部
				</view>
			</view>
			<!-- <view class="c_presentabitem" @tap="tab(0)">
				<view class="c_i" :class="{c_iactive:active===0}">
					收回本金
				</view>
			</view> -->
			<view class="c_presentabitem" @tap="tab(1)">
				<view class="c_i" :class="{c_iactive:active==1}">
					已付款
				</view>
			</view>
			<view class="c_presentabitem" @tap="tab(3)">
				<view class="c_i" :class="{c_iactive:active==3}">
					待收货
				</view>
			</view>
			<view class="c_presentabitem" @tap="tab(5)">
				<view class="c_i" :class="{c_iactive:active==5}">
					待结算
				</view>
			</view>
			<view class="c_presentabitem" @tap="tab(4)">
				<view class="c_i" :class="{c_iactive:active==4}">
					已结算
				</view>
			</view>
			<view class="c_presentabitem" @tap="tab(6)">
				<view class="c_i" :class="{c_iactive:active==6}">
					售后
				</view>
			</view>
		</view>
		<view class="c_Divdenlist">
			<view class="" v-for="(item,index) in list" @tap="show(index)">
				<view class="c_Divdenlists">
					<view class="c_flex_1">
						<view class="flex_box">
							<text class="status_1" v-if="item.ordersn.includes('ZZ')">门店</text>
							<text class="status_2" v-if="item.ordersn.includes('SH')">商城</text>
							<text class="status_3" v-if="item.ordersn.includes('TG')">团购</text>
							<text class="clamp s_supname">{{item.supname}}</text>
						</view>
						<view class="">
							下单时间：{{item.createtime}}
						</view>
						<view v-if="item.finishtime!=''">
							完成时间：{{item.finishtime}}
						</view>
						<view v-if="item.jiesuantime&&item.jiesuantime!=''">
							结算时间：{{item.jiesuantime}}
						</view>
						<view class="ordersnum">
							编号：<text selectable="true">{{item.ordersn}}</text>
							<image v-show="shows!==index" src="/static/zhankai.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="c_info">
						<view class="" style="color: #000;">支付<text class="c_Divedentype"> {{item.price}}</text></view>
						<view class="" style="color: #666;">{{item.content}} <text class="c_Divedentype1">+{{item.commission}}</text> </view>
						<view class="c_Divedentype2">{{item.status}}</view>
						<view class="ordersnum" v-if="active==3">
							剩余{{parseInt(item.lastfinishtime/60/60)}}小时确认收货
						</view>
						<view class="ordersnum" v-if="active==5">
							<block v-if="item.lastjiesuantime>0">剩余{{parseInt(item.lastjiesuantime/60/60)}}小时结算</block>
							<block v-else>人工正在审核</block>
						</view>
					</view>	
				</view>
				<view class="c_showscenter" v-show="shows===index">
					<view class="c_df">
						<image :src="item.buyer.avatar" mode="" class="c_showsimg1"></image>
						<view class="c_df_con">
							<view class="flex_between">
								<view class="c_df_tag" v-if="item.isparent==1">直推</view>
								<view class="c_df-cont clamp">
									{{item.buyer.nickname}} 
								</view>
								<text selectable="true">（ID : {{item.buyer.id}}）</text>
							</view>
							<view class="c_df_iden">{{item.buyer.bonuslevelstr}}</view>
						</view>
					</view>
					<view class="c_df" style="justify-content: space-between;"  v-if="item.ordersn.includes('SH')" v-for="goods in item.order_goods"
						@click="navTo('/pages/product/product?id='+goods.goodsid)">
						<view class="c_df" style="width: 80%;padding: 0upx;box-sizing: border-box;margin-top: 20upx;" v-if="goods.optionname!=null" >
							<image :src="goods.thumb" class="c_showsimg2"></image>
							<view class="c_goodsname">
								<view class="c_goodsnametitle">
									<text selectable="true">{{goods.title}}</text>
								</view>
								<view class="">
									<text v-if="goods.optionname" style="margin-right: 20upx;">规格：{{goods.optionname}}</text>数量：{{goods.total}}
								</view>
							</view>
						</view>
						<!-- <view class="c_goodsname-bonus">
							<view class="">
								{{goods.levelname}}
							</view>
							<view class="">
								+{{goods.commission}}
							</view>
						</view> -->
					</view>
					<view class="c_df" style="justify-content: space-between;"  v-if="item.ordersn.includes('TG')" v-for="goods in item.order_goods"
							@click="navTo('/pages/product/groupbuy?id='+goods.goodsid)">
							<view class="c_df" style="width: 80%;padding: 0upx;box-sizing: border-box;margin-top: 20upx;" v-if="goods.optionname!=null" >
								<image :src="goods.thumb" class="c_showsimg2"></image>
								<view class="c_goodsname">
									<view class="c_goodsnametitle">
										<text selectable="true">{{goods.title}}</text>
									</view>
									<view class="">
										<text v-if="goods.optionname" style="margin-right: 20upx;">规格：{{goods.optionname}}</text>数量：{{goods.total}}
									</view>
								</view>
							</view>
						</view>
					
				</view>
			</view>
			<view class="hback">
				<image v-if="isloading" src="../../static/business/loading.gif" mode=""></image>
				<view v-if="isempty">到底了~</view>
			</view>
			<view class="di_tip" @click="openTip">
				<image src="/static/tishi.png" mode="widthFix"></image>
			</view>
			
		</view>
		<bot-tomtab />
		<uni-popup ref="tip_popup" background-color="#fff" type="bottom">
			<view class="tip_content">
				<view class="tip_tit">收益说明</view>
				<view>[已付款] 买家下单后，已支付</view>
				<view>[待收货] 买家已付款，未确认收货，满10天系统自动收货</view>
				<view>[待结算] 买家已确认收货，满7天售后期，平台当天结算</view>
				<view>[已结算] 已发放至钱包余额中，可进行提现</view>
				<view>[售后] 买家申请退款的订单</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import BotTomtab from '@/components/bottomtab.vue';
	export default {
		data() {
			return {
				active: '',
				list: [],
				page: 1,
				shows: "",
				isloading: false,
				isempty: false
			}
		},
		components: {
			BotTomtab
		},
		onReachBottom() {
			this.page = this.page + 1;
			this.isloading=true;
			this.$axios('Order/moneyLog', "POST", 'bonus', {
				page: this.page,
				status: this.active,
			}).then(res => {
				this.isloading=false;
				if (res.data.code == 200) {
					let length=res.data.data.list.length;
					this.list = this.list.concat(res.data.data.list);
					this.isempty = length <= 0 ? true : false;
				}
			})
		},
		onLoad(option) {
			this.active=option.id?option.id:this.active;
			this.isloading = true;
			this.$axios('Order/moneyLog', "POST", 'bonus', {
				page: this.page,
				status: this.active,
			}).then(res => {
				this.isloading=false;
				if (res.data.code == 200) {
					let length=res.data.data.list.length;
					this.list = res.data.data.list;
					this.isempty = length <= 0 ? true : false;
				}
			})
		},
		// 搜索
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.navTo('bonusearch');
			}
		},
		methods: {
			openTip(){
				this.$refs.tip_popup.open()
			},
			// 跳转页面
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			tab: function(index) {
				var that = this;
				if(this.active === index) return ;
				this.active = index;
				that.shows = ''
				that.page = 1
				that.list = []
				this.isloading=true;
				this.isempty=false;
				that.$axios('Order/moneyLog', "POST", 'bonus', {
					page: that.page,
					status: that.active,
				}).then(res => {
					this.isloading=false
					if (res.data.code == 200) {
						let length=res.data.data.list.length;
						that.list = res.data.data.list;
						that.isempty = length <= 0 ? true : false;
					}
				})
			},
			show: function(ids) {
				var that = this;
				if (that.shows === ids) {
					that.shows = ''
				} else {
					that.shows = ids
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #eee;
		padding-bottom: 130upx;
	}

	.iconimg {
		position: fixed;
		width: 42upx;
		top: 16upx;
		right: 26upx;
		z-index: 100;
	}
	.di_tip{
		position: fixed;
		bottom: 220rpx;
		right: 40rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		// box-shadow: 0rpx 0rpx 14rpx 0rpx #8615e1;
		box-shadow: 0rpx 0rpx 20rpx 0rpx #bdb9b9;
		image{
			width: 100%;
		}
	}
	.uni-popup{
		z-index: 999!important;
	}
	.tip_content{
		padding: 40rpx 30rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		.tip_tit{
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 22rpx;
		}
		view{
			margin-bottom: 10rpx;
		}
	}
	// 小程序搜索框
	/* #ifdef MP */
	.mp-search-box {
		width: 100%;
		padding: 14upx 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;

		.ser-input {
			flex: 1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 34upx;
			color: $font-color-base;
			border-radius: 20px;
			background: rgba(231, 231, 231, .7) url(../../static/ss.png) no-repeat 32% center;
			background-size: 40upx 40upx;
			margin: 0 10upx;
		}
	}

	/* #endif*/
	.c_presentab {
		background: #fff;
		display: flex;
		justify-content: space-between;
		position: fixed;
		// top: var(--window-top);
		width: 100%;
		z-index: 10;

		.c_presentabitem {
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			width: 25%;

			.c_i {
				display: inline-block;
			}

			.c_iactive {
				border-bottom: 2px solid $base-color;
				color: $base-color;
			}
		}
	}

	.c_Divdensearch {
		background: #fff;
		display: flex;
		align-items: center;
		padding: 20upx;
		margin-bottom: 20upx;

		input {
			background: #ccc;
			margin-left: 20upx;
		}
	}
	.c_Divdenlist{
		position: relative;
		padding-top: 80upx;
		z-index: 1;
	}
	.c_Divdenlists {
		padding: 20upx;
		background: #fff;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.c_flex_1{
			width: calc(100% - 234rpx);
			padding-right: 20rpx;
			.s_supname{
				margin-left: 8rpx;
				flex: 1;
			}
		}
		.c_info{
			width: 234rpx;
		}
		.c_Divedentype {
			padding-top: 10upx;
			color: #000;
			font-weight: bold;
		}
		.c_Divedentype1{
			color: #e10602;
			font-weight: bold;
		}
		.c_Divedentype2{
			color: #000;
			font-weight: bold;
		}
		.status_1{
			color: #fff;
			font-size: 24upx;
			font-weight: bold;
			text-align:center;
			border:1px solid #e3452c;
			padding:0px 2px;
			border-radius:4px;
			background: #e3452c;
		}
		.status_2{
			color: #fff;
			font-size: 24upx;
			font-weight: bold;
			text-align:center;
			border:1px solid $bg-color;
			padding:0px 2px;
			border-radius:4px;
			background:$bg-color;
		}
		.status_3{
			color: #fff;
			font-size: 24upx;
			font-weight: bold;
			text-align:center;
			border:1px solid #06803A;
			padding:0px 2px;
			border-radius:4px;
			background:#06803A;
		}
	}

	.c_df {
		display: flex;
		align-items: center;
	}

	.c_showscenter {
		background-color: #fff;
		padding: 20upx;
		box-sizing: border-box;
		border-top: 1px rgba(204, 204, 204, 0.3) solid;

		.c_df {
			padding: 0;

			image {
				margin-right: 20rpx;
				flex-shrink: 0;
			}
			.c_df_con{
				width: calc(100% - 80rpx);
			}
			.c_df_tag{
				background: #f3e1f6;
				color: #ac33c1;
				font-size: 22rpx;
				border-radius: 6rpx;
				margin-right: 16rpx;
				padding: 2rpx 10rpx;
			}
			.c_df_iden{
				background: #000;
				color: gold;
				font-size: 22rpx;
				border-radius: 6rpx;
				margin-right: 16rpx;
				padding: 2rpx 10rpx;
				margin-top: 6rpx;
				width: fit-content;
			}

			.c_df-cont {
				font-size: 30rpx;
				color: #333;
				flex: 1;
			}
		}
	}

	.c_showsimg1 {
		width: 80upx;
		height: 80upx;
	}

	.c_showsimg2 {
		border-radius: 10upx;
		width: 100upx;
		height: 100upx;
	}

	.c_goodsname {
		flex: 1;

		.c_goodsnametitle {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}

	.ordersnum {
		color: #666;
		font-size: 24upx;
		padding-bottom: 10upx;
		display: flex;
		align-items: center;
		image{
			width: 32rpx;
			margin-left: 10rpx;
		}
	}

	.hback {
		padding-top: 30upx;
		text-align: center;
		color: #0062CC;
		image {
			height: 60upx;
			width: 60upx;
		}
	}

	.c_goodsname-bonus {
		position: absolute;
		right: 20upx;
		text-align: center;
	}
</style>
